<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <title>作品排行榜 - 数智化赋能“微情境·微宣讲”红色实践活动</title>

  <!-- 引入Swiper CSS -->
  <link rel="stylesheet" href="../templates/h5/assets/swiper-bundle.min.css">
  <!-- 引入Tailwind CSS -->
  <script src="../templates/h5/assets/tailwindcss3.4.17.css"></script>
  <!-- 引入Font Awesome -->
  <link href="../templates/h5/assets/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <script>
    // 配置Tailwind自定义颜色（红色主题）
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#b71211', // 主红色
            secondary: '#FFD700', // 辅助金色
            red: {
              700: '#B91C1C',    // 稍浅红色
              800: '#991B1B',    // 深一点的红色
              900: '#7F1D1D',    // 最深红色
            }
          },
        },
      }
    }
  </script>
  
  <style type="text/tailwindcss">
    @layer utilities {
      /* 导航栏样式 */
      .nav-item {
        @apply flex flex-col items-center justify-center text-gray-300 active:bg-red-800 h-full;
      }
      .nav-item.active {
        @apply text-white;
      }
      .nav-icon {
        @apply text-lg mb-1;
      }
      .nav-text {
        @apply text-xs;
      }
      
      /* 排序选项样式（已优化滑动） */
	  .sort-options {
		@apply flex w-full max-h-12 overflow-x-auto overflow-y-hidden py-2 gap-2 mb-4 hide-scrollbar scroll-smooth;
	  }
	  .sort-option {
		@apply whitespace-nowrap px-3 py-1.5 bg-red-800 rounded-full text-sm cursor-pointer transition-all;
	  }
	  .sort-option.active {
		@apply bg-secondary text-red-900 font-medium;
	  }
      
      /* 排行榜项样式 */
      .rank-item {
        @apply bg-red-800 rounded-lg overflow-hidden border border-red-700 mb-3 flex;
      }
      .rank-badge {
        @apply w-10 flex-shrink-0 flex items-center justify-center font-bold text-sm;
      }
      .top-1 {
        @apply bg-secondary text-red-900;
      }
      .top-2 {
        @apply bg-gray-300 text-red-900;
      }
      .top-3 {
        @apply bg-amber-700 text-white;
      }
      .normal-rank {
        @apply bg-red-900 text-white;
      }
      
      /* 隐藏滚动条但保留功能 */
      .hide-scrollbar::-webkit-scrollbar {
        @apply hidden;
      }
      .hide-scrollbar {
        -ms-overflow-style: none;
        scrollbar-width: none;
      }
    }
  </style>
</head>
<body class="bg-primary text-white">
  <div class="max-w-md mx-auto min-h-screen flex flex-col">
    <!-- 页面标题栏 -->
    <div class="py-4 px-4 border-b border-red-700 bg-red-900 flex justify-between items-center">
      <a href="#" class="text-white"><i class="fa fa-arrow-left"></i></a>
      <h1 class="text-xl font-bold">作品排行榜</h1>
      <span class="w-6"></span> <!-- 占位，保持标题居中 -->
    </div>
    
    <!-- 页面内容区 -->
    <div class="flex-1 overflow-y-auto p-4 pb-24">
      <!-- 排序选项 -->
      <div class="sort-options">
        <div class="sort-option active" data-sort="score">综合得分</div>
        <div class="sort-option" data-sort="likes">点赞量</div>
        <div class="sort-option" data-sort="views">浏览量</div>
        <div class="sort-option" data-sort="shares">转发量</div> <!-- 新增转发量排序 -->
        <div class="sort-option" data-sort="student">学生评分</div>
        <div class="sort-option" data-sort="teacher">教师评分</div>
      </div>
      
      <!-- 排行榜列表 -->
      <div class="rank-list" id="rankList">
<!-- 排名1 -->
        <div class="rank-item" data-score="98.5" data-likes="8542" data-views="24631" data-shares="3256" data-student="97.2" data-teacher="99.0">
          <div class="rank-badge top-1">1</div>
          <div class="flex-1 flex">
            <a href="index_zuopin.html"><img src="https://picsum.photos/300/200?random=10" alt="作品封面" class="w-20 h-full object-cover"></a>
            <div class="p-2 flex-1 overflow-hidden">
              <h3 class="text-sm font-medium truncate">《红色记忆》</h3>
              <div class="flex justify-between text-xs text-gray-200 mt-1">
                <span><i class="fa fa-star text-secondary mr-1"></i>综合: 98.5</span>
                <span><i class="fa fa-thumbs-up text-secondary mr-1"></i>8.5k</span>
              </div>
              <div class="flex justify-between text-xs text-gray-200 mt-1">
                <span><i class="fa fa-eye text-secondary mr-1"></i>24.6k</span>
                <span><i class="fa fa-share-alt text-secondary mr-1"></i>3.3k</span>
              </div>
              <div class="flex justify-between text-xs text-gray-200 mt-1">
                <span><i class="fa fa-users text-secondary mr-1"></i>学:97.2</span>
                <span><i class="fa fa-graduation-cap text-secondary mr-1"></i>教:99.0</span>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 排名2 -->
        <div class="rank-item" data-score="95.3" data-likes="7951" data-views="21357" data-shares="2891" data-student="96.5" data-teacher="94.5">
          <div class="rank-badge top-2">2</div>
          <div class="flex-1 flex">
            <img src="https://picsum.photos/300/200?random=11" alt="作品封面" class="w-20 h-full object-cover">
            <div class="p-2 flex-1 overflow-hidden">
              <h3 class="text-sm font-medium truncate">《时代新声》</h3>
              <div class="flex justify-between text-xs text-gray-200 mt-1">
                <span><i class="fa fa-star text-secondary mr-1"></i>综合: 95.3</span>
                <span><i class="fa fa-thumbs-up text-secondary mr-1"></i>8.0k</span>
              </div>
              <div class="flex justify-between text-xs text-gray-200 mt-1">
                <span><i class="fa fa-eye text-secondary mr-1"></i>21.4k</span>
                <span><i class="fa fa-share-alt text-secondary mr-1"></i>2.9k</span>
              </div>
              <div class="flex justify-between text-xs text-gray-200 mt-1">
                <span><i class="fa fa-users text-secondary mr-1"></i>学:96.5</span>
                <span><i class="fa fa-graduation-cap text-secondary mr-1"></i>教:94.5</span>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 排名3 -->
        <div class="rank-item" data-score="92.7" data-likes="6824" data-views="18426" data-shares="2158" data-student="94.0" data-teacher="91.8">
          <div class="rank-badge top-3">3</div>
          <div class="flex-1 flex">
            <img src="https://picsum.photos/300/200?random=12" alt="作品封面" class="w-20 h-full object-cover">
            <div class="p-2 flex-1 overflow-hidden">
              <h3 class="text-sm font-medium truncate">《青春力量》</h3>
              <div class="flex justify-between text-xs text-gray-200 mt-1">
                <span><i class="fa fa-star text-secondary mr-1"></i>综合: 92.7</span>
                <span><i class="fa fa-thumbs-up text-secondary mr-1"></i>6.8k</span>
              </div>
              <div class="flex justify-between text-xs text-gray-200 mt-1">
                <span><i class="fa fa-eye text-secondary mr-1"></i>18.4k</span>
                <span><i class="fa fa-share-alt text-secondary mr-1"></i>2.2k</span>
              </div>
              <div class="flex justify-between text-xs text-gray-200 mt-1">
                <span><i class="fa fa-users text-secondary mr-1"></i>学:94.0</span>
                <span><i class="fa fa-graduation-cap text-secondary mr-1"></i>教:91.8</span>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 排名4 -->
        <div class="rank-item" data-score="89.5" data-likes="5973" data-views="15824" data-shares="1876" data-student="90.2" data-teacher="89.0">
          <div class="rank-badge normal-rank">4</div>
          <div class="flex-1 flex">
            <img src="https://picsum.photos/300/200?random=13" alt="作品封面" class="w-20 h-full object-cover">
            <div class="p-2 flex-1 overflow-hidden">
              <h3 class="text-sm font-medium truncate">《传承之光》</h3>
              <div class="flex justify-between text-xs text-gray-200 mt-1">
                <span><i class="fa fa-star text-secondary mr-1"></i>综合: 89.5</span>
                <span><i class="fa fa-thumbs-up text-secondary mr-1"></i>6.0k</span>
              </div>
              <div class="flex justify-between text-xs text-gray-200 mt-1">
                <span><i class="fa fa-eye text-secondary mr-1"></i>15.8k</span>
                <span><i class="fa fa-share-alt text-secondary mr-1"></i>1.9k</span>
              </div>
              <div class="flex justify-between text-xs text-gray-200 mt-1">
                <span><i class="fa fa-users text-secondary mr-1"></i>学:90.2</span>
                <span><i class="fa fa-graduation-cap text-secondary mr-1"></i>教:89.0</span>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 排名5 -->
        <div class="rank-item" data-score="87.6" data-likes="4852" data-views="12635" data-shares="1542" data-student="88.5" data-teacher="87.0">
          <div class="rank-badge normal-rank">5</div>
          <div class="flex-1 flex">
            <img src="https://picsum.photos/300/200?random=14" alt="作品封面" class="w-20 h-full object-cover">
            <div class="p-2 flex-1 overflow-hidden">
              <h3 class="text-sm font-medium truncate">《希望的方向》</h3>
              <div class="flex justify-between text-xs text-gray-200 mt-1">
                <span><i class="fa fa-star text-secondary mr-1"></i>综合: 87.6</span>
                <span><i class="fa fa-thumbs-up text-secondary mr-1"></i>4.9k</span>
              </div>
              <div class="flex justify-between text-xs text-gray-200 mt-1">
                <span><i class="fa fa-eye text-secondary mr-1"></i>12.6k</span>
                <span><i class="fa fa-share-alt text-secondary mr-1"></i>1.5k</span>
              </div>
              <div class="flex justify-between text-xs text-gray-200 mt-1">
                <span><i class="fa fa-users text-secondary mr-1"></i>学:88.5</span>
                <span><i class="fa fa-graduation-cap text-secondary mr-1"></i>教:87.0</span>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 排名6 -->
        <div class="rank-item" data-score="85.3" data-likes="4218" data-views="10542" data-shares="1287" data-student="86.8" data-teacher="84.2">
          <div class="rank-badge normal-rank">6</div>
          <div class="flex-1 flex">
            <img src="https://picsum.photos/300/200?random=15" alt="作品封面" class="w-20 h-full object-cover">
            <div class="p-2 flex-1 overflow-hidden">
              <h3 class="text-sm font-medium truncate">《信仰的力量》</h3>
              <div class="flex justify-between text-xs text-gray-200 mt-1">
                <span><i class="fa fa-star text-secondary mr-1"></i>综合: 85.3</span>
                <span><i class="fa fa-thumbs-up text-secondary mr-1"></i>4.2k</span>
              </div>
              <div class="flex justify-between text-xs text-gray-200 mt-1">
                <span><i class="fa fa-eye text-secondary mr-1"></i>10.5k</span>
                <span><i class="fa fa-share-alt text-secondary mr-1"></i>1.3k</span>
              </div>
              <div class="flex justify-between text-xs text-gray-200 mt-1">
                <span><i class="fa fa-users text-secondary mr-1"></i>学:86.8</span>
                <span><i class="fa fa-graduation-cap text-secondary mr-1"></i>教:84.2</span>
              </div>
            </div>
          </div>
        </div>        
        <!-- 排名6-8结构相同，已省略 -->
      </div>
    </div>
    
    <!-- 底部固定导航栏 -->
    <div class="fixed bottom-0 left-0 right-0 max-w-md mx-auto bg-red-900 border-t border-red-700 z-50 h-16 flex">
      <a href="/h5/index" class="nav-item active flex-1">
        <i class="nav-icon fa fa-home"></i>
        <span class="nav-text">首页</span>
      </a>
      <a href="/h5/index_huodong" class="nav-item flex-1">
        <i class="nav-icon fa fa-calendar"></i>
        <span class="nav-text">活动</span>
      </a>
      <a href="/h5/index_paihangbang" class="nav-item flex-1">
        <i class="nav-icon fa fa-bar-chart"></i>
        <span class="nav-text">排行榜</span>
      </a>
      <a href="/h5/index_yonghu" class="nav-item flex-1">
        <i class="nav-icon fa fa-user"></i>
        <span class="nav-text">我的</span>
      </a>
    </div>
  </div>

  <script>
    // 保持原有的JavaScript功能代码不变
    document.addEventListener('DOMContentLoaded', function() {
      // 导航栏切换效果
      const navItems = document.querySelectorAll('.nav-item');
      navItems.forEach(item => {
        item.addEventListener('click', function(e) {
          //e.preventDefault();
          navItems.forEach(nav => nav.classList.remove('active'));
          this.classList.add('active');
        });
      });
      
      // 返回按钮事件
      document.querySelector('.fa-arrow-left').parentElement.addEventListener('click', function(e) {
        e.preventDefault();
        window.history.back();
      });
      
      // 排序功能实现
      const sortOptions = document.querySelectorAll('.sort-option');
      const rankList = document.getElementById('rankList');
      let rankItems = Array.from(document.querySelectorAll('.rank-item'));
      
      sortOptions.forEach(option => {
        option.addEventListener('click', function() {
          // 更新选中状态
          sortOptions.forEach(opt => opt.classList.remove('active'));
          this.classList.add('active');
          
          // 获取排序类型
          const sortType = this.dataset.sort;
          
          // 根据类型排序
          rankItems.sort((a, b) => {
            const valueA = parseFloat(a.dataset[sortType]);
            const valueB = parseFloat(b.dataset[sortType]);
            return valueB - valueA; // 降序排列
          });
          
          // 重新渲染列表并更新排名
          rankList.innerHTML = '';
          rankItems.forEach((item, index) => {
            // 更新排名数字
            const rankBadge = item.querySelector('.rank-badge');
            rankBadge.textContent = index + 1;
            
            // 更新排名样式
            rankBadge.className = 'rank-badge';
            if (index === 0) {
              rankBadge.classList.add('top-1');
            } else if (index === 1) {
              rankBadge.classList.add('top-2');
            } else if (index === 2) {
              rankBadge.classList.add('top-3');
            } else {
              rankBadge.classList.add('normal-rank');
            }
            
            // 添加到列表
            rankList.appendChild(item);
          });
        });
      });
    });
  </script>
</body>
</html>